<template>
  <div>
    <!-- 头部 -->
    <div class="search">
      <a-form style="padding-top: 20px" :model="form" :hideRequiredMark="true" :label-col="labelCol">
        <a-row :gutter="20">
          <a-col :span="6" :lg="5" :md="7" :xs="20">
            <a-form-item name="nickName" label="订单号">
              <a-input v-model:value="form.number" placeholder=""></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6" :lg="5" :md="7" :xs="20">
            <a-form-item name="nickName" label="用户姓名">
              <a-input v-model:value="form.userName" placeholder=""></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6" :lg="5" :md="7" :xs="20">
            <a-form-item name="nickName" label="联系方式">
              <a-input v-model:value="form.mobile" placeholder=""></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6" :lg="5" :md="7" :xs="20">
            <a-form-item name="nickName" label="服务名称">
              <a-input v-model:value="form.serviceName" placeholder=""></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="6" :lg="6" :xs="11" :md="8">
            <a-form-item label="完成时间">
              <a-range-picker
                v-model:value="time"
                style="width: 100%"
                :ranges="ranges"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                @change="panelChange"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6" :lg="6" :xs="11" :md="8">
            <a-form-item label="回访时间">
              <a-range-picker
                v-model:value="time1"
                style="width: 100%"
                :ranges="ranges"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                @change="panelChange1"
              />
            </a-form-item>
          </a-col>
          <a-form-item name="saleValue" label="服务标签：">
            <a-select ref="select" v-model:value="form.evaluate" @focus="focus" @change="handleChange" placeholder="请选择">
              <a-select-option v-for="item in buyCar" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item name="saleValue" label="回访状态">
            <a-select ref="select" v-model:value="form.visitStatus" @focus="focus" @change="handleChange" placeholder="请选择">
              <a-select-option v-for="item in buyCar1" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-col :span="2" :lg="2" :xs="5">
            <a-button type="primary" @click="search" class="d-a-center">搜索</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="cards" style="margin-bottom: 8px" v-if="mydata">
      <a-card style="text-align: center">
        <div class="title">订单数量</div>
        <div class="value">{{ mydata.orderNum }}单</div>
      </a-card>
      <a-card style="text-align: center">
        <div class="title">回访数量</div>
        <div class="value">{{ mydata.visitNum }}单</div>
      </a-card>
      <a-card style="text-align: center">
        <div class="title">回访率</div>
        <div class="value">{{ mydata.visitRate }}%</div>
      </a-card>
    </div>

    <!-- 列表 -->
    <a-table :columns="columns" :data-source="list" bordered :loading="loading" :pagination="pagination" @change="handleTableChange">
      <!-- :scroll="{ y: 540 ,x:'auto'}" -->

      <template #status="{ record }">
        <a-tag :color="nurseStatusColor(record.status)">{{ nurseStatus(record.status) }}</a-tag>
      </template>
      <template #operation="{ record }">
        <a-button type="link" v-if="record.visitStatus == 2" @click="look(record.number, 1, listPage, form)">查看</a-button>

        <!-- v-has="{ a: $route, b: 1 }" -->
        <a-button type="link" v-has="{ a: $route, b: 2 }" v-else @click="look(record.number, 2, listPage, form)">回访</a-button>
        <!-- v-has="{ a: $route, b: 2 }" -->
      </template>
    </a-table>

    <template v-if="detailVisible">
      <CertificationDetail :visible="detailVisible" :isEdit="isEdit" :id="id" @closeModal="closeModal"> </CertificationDetail>
    </template>

    <!-- 审核弹窗 -->
    <div>
      <a-modal class="audit-modal" :width="250" v-model:visible="visible" title="通过审核" @ok="handleOk" :footer="null" :closable="false">
        <a-row>
          <a-col :span="6" :offset="2">
            <a-button type="info" @click="cancle" class="d-a-center">取消</a-button>
          </a-col>
          <a-col :span="6" :offset="6">
            <a-button type="primary" @click="pass" class="d-a-center">确定</a-button>
          </a-col>
        </a-row>
      </a-modal>
    </div>
  </div>
</template>
<script>
import { reactive, ref, watch, computed, defineComponent, createVNode, toRefs, onMounted } from 'vue'
import { CheckOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Modal, message } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import { saveVisitRecord, visitOrderList, visitOrderDetail, getNurseLabel, visitStatistics } from '@/api/buisness/index.js'
import CertificationDetail from '../components/CertificationDetail.vue'
import { deleteObjBlank } from '@/assets/js/common.js'
export default {
  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
    CertificationDetail
  },
  setup() {
    const formRef = ref('')
    // const form = reactive({});
    const router = useRouter()
    const route = useRoute()
    const data = reactive({
      loading: true,
      time: [],
      list: [],
      visible: false,
      detailVisible: false, //详情弹窗
      isEdit: '', //查看审核
      id: '', //认证
      mydata: '',
      buyCar: [
        {
          name: '极差',
          id: '0'
        },
        {
          name: '一般',
          id: 1
        },
        {
          name: '良好',
          id: 2
        },
        {
          name: '优秀',
          id: 3
        },
        {
          name: '极好',
          id: 4
        }
      ],
      buyCar1: [
        {
          name: '未回访',
          id: '0'
        },
        {
          name: '未接通',
          id: 1
        },
        {
          name: '已回访',
          id: 2
        }
      ],
      form: {}
    })
    const rules = {}
    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 10,
      total: 0
    })

    const statusAct = ref(0) //状态激活

    // 状态列表
    const statusList = reactive([
      {
        title: '全部',
        status: 0
      },
      {
        title: '待审核',
        status: 1
      },
      {
        title: '已认证',
        status: 2
      },
      {
        title: '未通过',
        status: 3
      }
    ])
    // 选择时间
    const panelChange = (date, dateString) => {
      data.form.startTime = dateString[0]
      data.form.endTime = dateString[1]
    }
    const panelChange1 = (date, dateString) => {
      data.form.visitStartTime = dateString[0]
      data.form.visitEndTime = dateString[1]
    }

    // 查询
    const search = () => {
      console.log('cccccccccccccccc', data.form)
      if (Object.keys(data.form).length == 0) {
        message.warning('请输入你要搜索的内容！！！')
        return
      }
      deleteObjBlank(data.form)
      page.current = 1
      init()
    }

    const columns = [
      {
        title: '订单号',
        dataIndex: 'number',
        className: 'table',
        align: 'center'
      },
      {
        title: '用户姓名',
        dataIndex: 'userName',
        className: 'table',
        align: 'center'
      },
      {
        title: '用户id',
        dataIndex: 'userId',
        className: 'table',
        align: 'center'
      },
      {
        title: '联系方式',
        dataIndex: 'mobile',
        className: 'table',
        align: 'center'
      },
      {
        title: '服务名称',
        dataIndex: 'serviceName',
        className: 'table',
        align: 'center'
      },
      {
        title: '完成时间',
        dataIndex: 'compleTime',
        className: 'table',
        align: 'center'
      },
      {
        title: '回访时间',
        dataIndex: 'visitTime',
        className: 'table',
        align: 'center'
      },
      {
        title: '渠道来源',
        dataIndex: 'institution',
        className: 'table',
        align: 'center'
      },
      {
        title: '服务护士',
        dataIndex: 'nurseName',
        className: 'table',
        align: 'center'
      },
      {
        title: '服务分数',
        dataIndex: 'servieScore',
        className: 'table',
        align: 'center'
      },
      {
        title: '服务标签',
        dataIndex: 'serviceLabel',
        className: 'table',
        align: 'center'
      },
      {
        title: '回访状态',
        dataIndex: 'visitStatusStr',
        className: 'table',
        align: 'center'
      },
      {
        title: '状态',
        dataIndex: 'status',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'status'
        }
      },
      {
        title: '操作',
        dataIndex: 'operation',
        className: 'table',
        align: 'center',
        fixed: 'right',
        slots: {
          customRender: 'operation'
        }
      }
    ]
    const nurseStatusColor = computed(status => {
      return function (status) {
        if (status == 2) {
          return 'success'
        }
        if (status == 1) {
          return '#f50'
        }
        if (status == 3) {
          return 'error'
        }
      }
    })
    const nurseStatus = status => {
      let title = ''
      switch (status) {
        case 1:
          title = '待审核'
          break
        case 2:
          title = '已认证'
          break
        case 3:
          title = '未通过'
          break
      }
      return title
    }
    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ['10', '20', '30'],
      showTotal: (total, range) => {
        return '共' + total + '条'
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true
    }))

    onMounted(() => {
      getTotalData()
    })
    const getTotalData = () => {
      visitStatistics().then(r => {
        if (r.success) {
          data.mydata = r.object
        }
      })
    }
    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, '当前分页')
      page.current = pagination.current
      page.pageSize = pagination.pageSize

      // 请求列表接口
      init()
    }
    const chooseStatus = (status, index) => {
      if (statusAct.value == index) return
      statusAct.value = index
      if (index == 0) {
        delete data.form['status']
      } else {
        data.form.status = status
      }
      page.current = 1
      init()
    }
    const handleOk = e => {
      visible.value = false
    }
    const closeModal = e => {
      data.detailVisible = false

      // 执行成功再次请求
      if (true) {
        init()
      }
    }
    // 取消
    const cancle = () => {
      visible.value = false
    }
    const pass = () => {
      visible.value = false
    }
    // 查看和回访
    const look = (key, type) => {
      router.push({
        path: '/business/huifang/detail',
        query: {
          number: key,
          type,
          form: JSON.stringify(data.form),
          page: page.current
        }
      })
    }

    function findStr(str, cha, num) {
      let x = str.indexOf(cha)
      for (let i = 0; i < num; i++) {
        x = str.indexOf(cha, x + 1)
      }
      return x
    }
    // 审核
    const deal = (key, isEdit) => {
      data.detailVisible = true
      data.isEdit = 1
      data.id = key
    }
    let detailUrl = decodeURI(router.options.history.state.forward)
    if (detailUrl != null) {
      let sta = detailUrl.indexOf('detail') != -1
      console.log('sta', detailUrl)
      if (sta) {
        let a = detailUrl.length
        let b = detailUrl.lastIndexOf('=')
        page.current = detailUrl.substr(b + 1, a - b)
        console.log('listPage', data.listPage)
        let c = findStr(detailUrl, '=', 2) + 1
        let d = findStr(detailUrl, '&', 2)
        data.form = JSON.parse(detailUrl.substring(d, c))
        console.log('data.form', data.form)
      }
      init()
    }
    async function init() {
      data.loading = true
      let obj = {
        pageNum: page.current,
        pageSize: page.pageSize,
        ...data.form
      }
      console.log('vvvvvvvvvvv', obj)
      let res = await visitOrderList(obj)
      if (res.success) {
        res.object.list.map(el => (el.key = el.id))
        data.list = res.object.list
        page.total = res.object.total
        data.loading = false
      }
    }
    return {
      ...toRefs(data),
      formRef,
      rules,
      columns,
      pagination,
      statusList,
      handleTableChange,
      search,
      deal,
      look,
      statusAct,
      panelChange,
      chooseStatus,
      panelChange1,
      labelCol: {
        style: {
          fontWeight: 'bolder'
        }
      },
      cancle,
      handleOk,
      pass,
      nurseStatusColor,
      nurseStatus,
      closeModal
    }
  }
}
</script>
<style scoped lang="less">
.search {
  background-color: #e6e6e6;
  padding-left: 20px;
  margin-bottom: 20px;
}

.cards {
  display: flex;
  justify-content: space-around;
}
</style>
